<template>
  <div class="grid gap-y-5">
    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">修改信息</span>
      </div>
      <el-row>
        <el-form
          ref="infoForm"
          :model="infoFormData"
          :rules="infoRules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="24">
            <el-form-item
              label="账户名"
              prop="username"
            >
              <el-input
                v-model="infoFormData.username"
                prefix-icon="el-icon-user"
                :disabled="true"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
          >
            <el-form-item
              label="企业名"
              prop="ename"
            >
              <el-input
                v-model="infoFormData.ename"
                placeholder="请输入企业名"
                :maxlength="32"
                show-word-limit
                clearable
                prefix-icon="el-icon-office-building"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
          >
            <el-form-item
              label="企业类型"
              prop="etype"
            >
              <el-select
                v-model="infoFormData.etype"
                placeholder="请选择企业类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in etypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
          >
            <el-form-item
              label="邮箱"
              prop="email"
            >
              <el-input
                v-model="infoFormData.email"
                :maxlength="50"
                clearable
                prefix-icon="el-icon-message"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
          >
            <el-form-item
              label="电话"
              prop="phone"
            >
              <el-input
                v-model="infoFormData.phone"
                placeholder="请输入电话"
                :maxlength="11"
                clearable
                prefix-icon="el-icon-phone-outline"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item size="large">
              <el-button
                type="primary"
                @click="changeInfo"
              >
                保存
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">修改密码</span>
      </div>
      <div>
        <el-row>
          <el-col :span="24">
            <el-form
              ref="passForm"
              :model="passFormData"
              :rules="passRules"
              size="medium"
              label-width="100px"
            >
              <el-col
                :span="24"
              >
                <el-form-item
                  label="原密码"
                  prop="oldpass"
                >
                  <el-input
                    v-model="passFormData.oldpass"
                    :maxlength="64"
                    show-word-limit
                    clearable
                    prefix-icon="el-icon-key"
                    show-password
                    class="w-96 max-w-full"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :span="24"
              >
                <el-form-item
                  label="新密码"
                  prop="newpass"
                >
                  <el-input
                    v-model="passFormData.newpass"
                    :maxlength="64"
                    show-word-limit
                    clearable
                    prefix-icon="el-icon-key"
                    show-password
                    class="w-96 max-w-full"
                    placeholder="8~64个字符，允许字母/数字/符号"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :span="24"
              >
                <el-form-item
                  label="重复密码"
                  prop="reppass"
                >
                  <el-input
                    v-model="passFormData.reppass"
                    :maxlength="64"
                    show-word-limit
                    clearable
                    prefix-icon="el-icon-key"
                    show-password
                    class="w-96 max-w-full"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item size="large">
                  <el-button
                    type="primary"
                    @click="changePass"
                  >
                    修改密码
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      infoFormData: {
        username: undefined,
        ename: undefined,
        etype: undefined,
        email: undefined,
        phone: undefined
      },
      passFormData: {
        oldpass: undefined,
        newpass: undefined,
        reppass: undefined
      },
      infoRules: {
        ename: [
          {
            required: true,
            message: '请输入企业名',
            trigger: 'blur'
          }
        ],
        etype: [
          {
            required: true,
            message: '请选择企业类型',
            trigger: 'change'
          }
        ],
        email: [
          {
            pattern: /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/,
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          {
            pattern: /^\d{6,11}$/,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ]
      },
      passRules: {
        oldpass: [
          {
            required: true,
            message: '请输入旧密码',
            trigger: 'blur'
          }
        ],
        newpass: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          },
          {
            pattern: /^[\w\d~!@#$%^&*_.-]{8,64}$/,
            message: '格式不正确（8~64个字符，允许字母/数字/符号）',
            trigger: 'blur'
          }
        ],
        reppass: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || value === undefined) {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.passFormData.newpass) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      etypeOptions: [
        {
          label: '养殖场',
          value: 101
        },
        {
          label: '屠宰场',
          value: 102
        },
        {
          label: '批发市场',
          value: 103
        },
        {
          label: '零售商',
          value: 104
        }
      ]
    }
  },
  created: function () {
    this.axios.get('/api/ent/detail', {
      headers: {
        token: this.$store.state.ent.token
      }
    }).then(function (r) {
      if (r.data.success) {
        this.$store.commit('loadEntData', r.data.detail)

        this.infoFormData.username = r.data.detail.username
        this.infoFormData.ename = r.data.detail.ename
        this.infoFormData.etype = r.data.detail.etype
        this.infoFormData.email = r.data.detail.email
        this.infoFormData.phone = r.data.detail.tel
      }
    }.bind(this))
  },
  methods: {
    changeInfo () {
      this.$refs.infoForm.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/editDetail', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            ename: this.infoFormData.ename,
            etype: this.infoFormData.etype,
            email: this.infoFormData.email || '',
            tele: this.infoFormData.phone
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
        }.bind(this))
      })
    },
    changePass () {
      this.$refs.passForm.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/editPass', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            oldPass: this.passFormData.oldpass,
            newPass: this.passFormData.newpass
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
        }.bind(this))
      })
    }

  }
}
</script>
